<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>学生就业统计表</title>
		<link rel="stylesheet" href="./iconfont/iconfont.css" />
		<link rel="stylesheet" href="css/index.css" />
	</head>

	<body>
		<h1>学生就业统计表</h1>
		<form class="info" autocomplete="off">
			<input type="text" class="uname" name="uname" placeholder="姓名" />
			<input type="text" class="age" name="age" placeholder="年龄" />
			<input
				type="text"
				class="salary"
				name="salary"
				placeholder="薪资"
			/>
			<select name="gender" class="gender">
				<option value="男">男</option>
				<option value="女">女</option>
			</select>
			<select name="city" class="city">
				<option value="北京">北京</option>
				<option value="上海">上海</option>
				<option value="广州">广州</option>
				<option value="深圳">深圳</option>
				<option value="曹县">曹县</option>
			</select>
			<button class="add">
				<i class="iconfont icon-tianjia"></i>添加
			</button>
		</form>

		<div class="title">共有数据<span>0</span>条</div>
		<table>
			<thead>
				<tr>
					<th>ID</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th>薪资</th>
					<th>就业城市</th>
					<th>录入时间</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<!-- <tr>
        <td>1</td>
        <td>迪丽热巴</td>
        <td>23</td>
        <td>女</td>
        <td>12000</td>
        <td>北京</td>
        <td>2099/9/9 08:08:08</td>
        <td>
          <a href="javascript:">
            <i class="iconfont icon-shanchu"></i>
            删除
          </a>
        </td>
      </tr> -->
			</tbody>
		</table>
		<script>
			// 参考数据
			const stuData = localStorage.getItem("stuData")
				? JSON.parse(localStorage.getItem("stuData"))
				: [];

			const form = document.querySelector("form");
			const oInputs = document.querySelectorAll("form [name]");
			const tbody = document.querySelector("tbody");

			displayData();

			form.addEventListener("submit", (e) => {
				e.preventDefault();
				const stu = {};
				const date = new Date();
				stu.stuId = stuData.length
					? stuData[stuData.length - 1].stuId + 1
					: stuData.length + 1;
				stu.time = date.toLocaleString();

				for (let i = 0; i < oInputs.length; i++) {
					if (!oInputs[i].value) {
						return alert("有内容未填写!");
					}
				}

				oInputs.forEach((e) => {
					stu[e.name] = e.value;
				});
				stuData.push(stu);

				localStorage.setItem("stuData", JSON.stringify(stuData));
				form.reset();

				displayData();
			});

			function displayData() {
				const newData = stuData.map((e, i) => {
					return `<tr>
            <td>${e.stuId}</td>
            <td>${e.uname}</td>
            <td>${e.age}</td>
            <td>${e.gender}</td>
            <td>${e.salary}</td>
            <td>${e.city}</td>
            <td>${e.time}</td>
            <td>
            <a href="javascript:">
                <i class="iconfont icon-shanchu" data-index=${i}></i>
                删除
            </a>
            </td>
        </tr>`;
				});
				tbody.innerHTML = newData.join("");
			}

			// 为tbody添加点击事件委托
			tbody.addEventListener("click", (e) => {
				if (e.target.nodeName === "A" && confirm("是否确认删除")) {
					stuData.splice(e.target.dataset.index, 1);
					localStorage.setItem("stuData", JSON.stringify(stuData));
					displayData();
				}
			});
		</script>
	</body>
</html>
